<template>
	<view style="background-color: #fff;padding: 0 10px;">
		<uni-nav-bar left-icon="left"  :statusBar="true" titleSize="30px" leftText="返回" rightText="保存"  title="新增项目报备" @clickRight="addFn"  @clickLeft="back"  :fixed="true" backgroundColor="#3286ed" color="#fff"/>
	   <!-- 新增 -->
	   <u--form class="form" labelPosition="left" labelWidth="100px" :model="form" :rules="rules" ref="form">
		   <u-form-item label="负责人" prop="salesmanName" borderBottom ref="item1">
				<u--input v-model="form.salesmanName" border="none"  ></u--input>
			</u-form-item>
		   <u-form-item label="客户名称" prop="customerName" borderBottom ref="item1">
				<u--input v-model="form.customerName" border="none" placeholder="请输入客户名称" ></u--input>
		   </u-form-item>
		   <u-form-item label="客户电话" prop="customerTelephone" borderBottom ref="item1">
				<u--input v-model="form.customerTelephone" border="none"  placeholder="请输入客户电话" ></u--input>
		   </u-form-item>
		   <u-form-item label="公司名称" prop="corporateName" borderBottom ref="item1">
		   		<u--input v-model="form.corporateName" border="none"  placeholder="请输入公司名称"></u--input>
		   </u-form-item>
		   <u-form-item label="项目名称" prop="projectName" borderBottom ref="item1">
				<u--input  v-model="form.projectName" border="none" placeholder="请输入项目名称" ></u--input>
		   </u-form-item>
		   <u-form-item label="项目地址" prop="projectAddress" borderBottom ref="item1" @click="projectAddressBtn">
				<u--input  v-model="form.projectAddress" border="none"  placeholder="请输入项目地址"></u--input>
		        <u-icon slot="right" class="box" @click="projectAddressBtn" name="arrow-right"></u-icon>
		   </u-form-item>
		   <u-form-item label="产品名称" prop="productName" borderBottom ref="item1" @click="productNameShow=true" >
				<u--input  v-model="form.productName" border="none"  :readonly="true"></u--input>
				<u-icon slot="right" class="box" @click="productNameShow=true" name="arrow-right"></u-icon>
		   </u-form-item>
	   </u--form>
	   <!-- 产品名称 -->
	   <u-picker :closeOnClickOverlay="true"  @close="productNameShow=false" :show="productNameShow" :columns="productNameOption" @cancel="productNameShow=false" @confirm="confirmFn" keyName="productName"  ></u-picker>
	   <u-toast ref="uToast"></u-toast>
	   <uni-data-picker v-if="projectAdressShow==true" v-model='form.projectAddress' @change="onchange" :localdata="regionOptions" ref="pick" popup-title="请选择"></uni-data-picker>
	<!-- 提示框 -->
		<u-modal showConfirmButton showCancelButton @confirm="BtnModel" @cancel="BtnShow=false" :show="BtnShow" title="提示" content='是否确认提交?'></u-modal>
	</view>
</template>

<script>
	import {addReportedApi} from '@/api/projectRemark.js'
	import {provinceNameList} from'@/api/region/region.js'
	import {selectProductQuantityList} from'@/api/product/product.js'
	export default {
		data(){
			return {
				form:{
					pageSize:10,
					pageNum:1,
					customerName:null,
					customerTelephone:null,
					projectName:null,
					projectAddress:null,
					corporateName:null,
					salesmanId:null,
					salesmanName:null,
					status:null,
					productName:null,
				},
				BtnShow:false,
				rules:{
					customerName: [	{	required: true,	message: '请输入客户名称',	trigger: ['blur', 'change']}],
					projectName: [	{	required: true,	message: '请输入项目名称',	trigger: ['blur', 'change']}],
					customerTelephone: [	
						{	required: true,	message: '请输入联系人电话',	trigger: ['blur', 'change']},
						{	validator: (rule, value, callback) => {
										return uni.$u.test.mobile(value);
									},
									message: '手机号码不正确',trigger: ['change','blur'],}
						],
					projectAddress: [	{	required: true,	message: '请输入项目地址',	trigger: ['blur', 'change']}],
					corporateName: [	{	required: true,	message: '请输入公司名称',	trigger: ['blur', 'change']}],
					productName: [	{	required: true,	message: '请选择产品',	trigger: ['blur', 'change']}],
				},
				productNameShow:false,
				productNameOption:[],
				regionOptions:[],
				projectAdressShow:false,
			}
		},
		onLoad(){
			console.log(this.$store.getters);
			this.form.salesmanId=this.$store.getters.userid
			this.form.salesmanName=this.$store.getters.name
		    this.getProduct()
			this.getAreaList()
		},
		methods:{
			back(){
				uni.redirectTo({
					url:'/pages/projectRemarks/index'
				})
			},
			addFn(){
				this.$refs.form.validate().then(res=>{
					console.log(res);
					if(res){
						this.BtnShow=true
					}
				})
			},
			BtnModel(){
				this.BtnShow=false
				addReportedApi(this.form).then(response=>{
					if(response.code==200){
						this.$refs.uToast.show({
							type:'success',
							message:'添加成功！',
							complete(){
								uni.redirectTo({
									url:'/pages/projectRemarks/index'
								})
							}
						})
					}else{
						this.$refs.uToast.show({
							type:'error',
							message:'添加失败！'
						})
					}
				})
			},
		
			confirmFn(e){
				console.log(e);
				this.form.productName=e.value[0].productName
				this.productNameShow=false
			},
			async getProduct(){
			const res=await	selectProductQuantityList()
			console.log(res);
			this.productNameOption.push(res.rows)
			},
			// 获取区域列表
			async getAreaList(){
				const res=	await provinceNameList()
				this.regionOptions=this.getList(res.rows)
				},
			getList(data){
				data.forEach((item)=>{
					// console.log(item);
					if(item.label){
						item.text=item.label
						delete item.label
					}
					if(item.children){
						this.getList(item.children)
					}
				})
				 return data
			},
			// 点击弹出地址
			projectAddressBtn(){
				this.projectAdressShow=true
				this.$nextTick(()=>{
					this.$refs.pick.show()
				})
			},
			onchange(e){
				console.log(e);
				this.form.projectAddress=e.detail.value[0].text+e.detail.value[1].text+e.detail.value[2].text
			    this.projectAdressShow=false
			}
			
		}
	}
</script>

<style lang="scss">
	.form{
		padding: 0 10px 0 15px;
	}
	.box{
		width: 40px;
		padding-left: 20px;
		height: 22px;
	}
</style>